<template>
  <section class="novel-wrap">
    <!--搜索框-->
    <novel-search/>

    <!-- 骨架屏 -->
    <vue-skeleton :row="6" :loading="firstLoading"/>

    <!--列表-->
    <div class="hot-advance" v-show="!firstLoading">热门推荐</div>
    <van-pull-refresh v-model="listLoading" @refresh="refreshList">
      <van-list :finished="listFinished" finished-text="没有更多了" @load="loadMoreList">
        <div v-for="(item, index)  in recommendData" :key="index">
          <novel-item :novelItem="item"/>
        </div>
      </van-list>
    </van-pull-refresh>

    <!-- 页面底部导航 -->
    <tabbar-com tabbar-name="novel"/>
  </section>
</template>

<script lang="ts">
  import {Component, Vue} from "vue-property-decorator";

  import {List} from "vant";
  import {PullRefresh} from "vant";
  import TabbarCom from "@/components/tabbar.vue";
  import NovelItem from "./novelInclude/novelItem";
  import novelSearch from "./novelInclude/novelSearch";

  @Component({
    components: {
      [List.name]: List,
      [PullRefresh.name]: PullRefresh,
      TabbarCom,
      NovelItem,
      novelSearch
    }
  })
  export default class Novel extends Vue {
    private firstLoading: boolean = true; // 页面加载中
    private recommendData: number[] = [];
    private listLoading: boolean = false; // 列表数据是否加载中
    private listFinished: boolean = false; // 列表数据是否全部加载完

    async mounted() {
      this.firstLoading = true;
      this.recommendData = await this.getNovelData();
    }

    // 请求推荐小说分类
    getNovelData() {
      return new Promise((resolve, reject) => {
        this.$api
          .get("/novelApi")
          .then((res: any) => {
            if (res && res.length) {
              resolve(res);
            }
          })
          .catch(e => {
            this.$toast(e.msg);
            reject(e);
          })
          .finally(() => {
            this.listLoading = false;
            this.firstLoading = false;
          });
      });
    }

    loadMoreList() {
    }

    async refreshList() {
      this.listLoading = true;
      this.recommendData = await this.getNovelData();
    }

  }
</script>

<style lang="scss">
  .novel-wrap {
    padding-bottom: 50px;
  }

  .hot-advance {
    padding: 10px 16px;
  }
</style>

